<template>
    <div class="body">
        <van-popup v-model="show" @click-overlay="overlay" :close-on-click-overlay="false" position="top"
            :style="{ height: '60%' }">
            <div class="search">
                <van-search shape="round" placeholder="请输入搜索关键词" v-model="value" show-action @search="onSearch"
                    @cancel="onCancel" />
            </div>
            <div class="searchHistory">

                <div class="searchHistory1" v-if="historyData.length > 0">
                    <div class="search123">
                        <h3>搜索历史</h3>
                        <div class="footer">
                            <span v-for="(item, index) in historyData" :key="index"
                                @click="$router.push('/searchresult/' + item)">{{ item }}</span>
                        </div>
                    </div>
                    <div>
                        <img src="../assets/images/删除 (1).png" @click="clearHistory"
                            style="width:25px;height:25px;line-height: 25px;" alt="">
                    </div>
                </div>

                <div class="searchHistory1">
                    <h3>搜索推荐</h3>
                    <i @click="eyeOpen = !eyeOpen" :class="['iconfont', eyeClass]"></i>
                </div>
                <div class="footer" v-if="eyeOpen">
                    <span v-for="(item, index) in hotsSearchData" :key="index"
                        @click="$router.push('/searchresult/' + item)">{{ item }}</span>
                </div>
                <div class="text-center" v-else>已隐藏热门搜索</div>
            </div>
            
        </van-popup>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value: "",
            show: true,
            eyeOpen: true,
            historyData: JSON.parse(localStorage.getItem('historyData') || '[]'),//把搜索历史存放在本地存储里面
            hotsSearchData: ['iphone6', '笔记本电脑', 'mac', '小米', 'DVD'],

        };
    },
    computed: {
        // 直接当做普通属性调用不加括号
        // 任何data中数据变化立即重新计算
        // 计算属性会缓存
        eyeClass() {
            return this.eyeOpen ? 'icon-yanjing' : 'icon-guanbi-yanjing'
        }
    },
    methods: {
        // 搜索
        onSearch() {
            // 获取输入的值，并存入到本地存储
            if (this.historyData.includes(this.value)) {
                console.log(this.value)
                return;
            }
            this.historyData.push(this.value)
            localStorage.setItem('historyData', JSON.stringify(this.historyData))
            // 并跳入到搜索结果页面
            this.$router.push(`/searchresult/${this.value}`)

        },
        overlay() {
            this.$router.back('/home/');
        },
        onCancel() {
            
            this.$router.back('/home/');
        },
        clearHistory() {
            this.historyData = [];
            localStorage.removeItem('historyData')
        }
    }
}
</script>

<style lang="scss" scoped>
.body {
    font-family: PingFangSC-Regular;
}

.searchHistory1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;
}

.footer {
    display: flex;
    justify-content: space-around;
}
</style>